<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>

  </style>
</head>
<body>
<canvas id="canvas" style="border: solid 1px #888;"></canvas>
<textarea id="css" style="width: 400px; height: 400px;"></textarea><br>
<button id="btn_download">download image</button>

<script>

    var btn_download = document.getElementById('btn_download');
    var css_out = document.getElementById('css');
    var canvas = document.getElementById('canvas');
    canvas.width = 256;
    canvas.height = 256;
    var g = canvas.g = canvas.getContext('2d');

    btn_download.onclick = function(){
        window.open(canvas.toDataURL());
    }

    canvas.ondragenter = function() {
        return false;
    };

    canvas.ondragover = function() {
        return false;
    };

    var images = [];

    function refresh(){
        var per = 'toolbar-';
        var retina_scale = 2;
        var x = 0, y = 0, gap = 5;
        var width = 0;
        var height = 0;

        function toInt(x){
            return Math.round(x / retina_scale);
        }

        images.forEach(function(image){width += image.width + gap; height = Math.max(height, image.height)});
        if(images.length > 1){
            width -= gap;
        }
        canvas.width = width;
        canvas.height = height;

        var class_name = '.qunee-editor__toolbar .icon';
        var image_url = 'images/icons-32.png';

        var css = class_name + ' {\n\
        background-image: url(' + image_url + ');\n\
        background-size: ' + toInt(width) + 'px ' + toInt(height) + 'px;\n\
      }\n'
        images.forEach(function(image){
            g.drawImage(image, x, y);
            css += '.' + per + image.name + '{ background-position: ' + toInt(-x) + 'px ' + toInt(-y) + 'px; width: ' +
            toInt(image.width) + 'px; height: ' + toInt(image.height) + 'px; }\n';
            x += gap + image.width;
        });

        css_out.value = css;
    }
    canvas.ondrop = function(e) {
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files;
        for(var i=0;i<files.length;i++) {
            var f = files[i];
            var numbers = files.length;
            if(f.type.indexOf('image') == 0) {
                (function(f) {
                    var name = f.name,
                            type = f.type;
                    if(typeof FileReader == 'undefined') {
                        alert('Sorry, FileReader() not supported, switch to Chrome and try again.')
                    }
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var dataURL = e.target.result;
                        var imgEL = new Image();
                        imgEL.onload = function(e) {
                            var image = e.target;
                            name = name.substring(0, name.lastIndexOf('.'));
                            image.name = name;
                            images.push(image);
                            --numbers;
                            if(numbers === 0) {
                                refresh();
                            }
                        }
                        imgEL.src = dataURL;
                    };
                    reader.readAsDataURL(f);
                })(f);
            }
        }
    };
</script>
</body>
</html>
